<template>
  <template v-if="user" >
    <van-card class="card"
              desc="关注: 4  粉丝: 7"
              :title="`${user.userAccount}`"
              :thumb="`${user.avatarUrl}`"
    >
      <template #tags>
        <van-tag v-if="user.tags && user.tags.trim()" plain type="primary" v-for="(tag, index) in JSON.parse(user.tags)" :key="index" style="margin-right: 8px; margin-top: 8px">
          {{tag}}
        </van-tag>
      </template>
    </van-card>
    <van-cell
        title="昵称"
        icon="user-o"
        :value="`${user?.username}`"
    />
    <van-cell
        title="手机号"
        icon="phone-o"
        :value="`${user?.phone}`"
    />
    <van-cell
        title="邮箱"
        icon="envelop-o"
        :value="`${user?.email}`"
    />
    <van-cell
        title="性别"
        :value="`${user.gender}`=== 0 ? '女生' : '男生'"
    >
      <template #icon>
        <svg-icon icon-name="icon-tongxingbie" class="left-icon"></svg-icon>
      </template>
    </van-cell>
    <van-cell
        title="加入时间"
        :value="`${user.createTime}`"
    >
      <template #icon>
        <svg-icon icon-name="icon-shizhong" class="left-icon"></svg-icon>
      </template>
    </van-cell>
  </template>
  <div class="button">
    <van-button type="primary" class="message">发消息</van-button>
    <van-button type="primary" class="delete">删除好友</van-button>
  </div>


<!--    <van-button type="primary" v-if="user.userId2 !== currentUser?.id && !user.hasFriend" plain
                @click="preJoinTeam(team)">
      加为好友
    </van-button>
    <van-button v-if="user.userId2 === currentUser?.id"
                @click="doUpdateTeam(user.id)">发消息
    </van-button>
    &lt;!&ndash; 仅加入队伍可见 &ndash;&gt;
    <van-button v-if="user.userId2 == currentUser?.id && team.hasFriend" plain
                @click="doQuitTeam(team.id)">删除好友
    </van-button>
 -->
</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {UserType} from "../models/user";
import SvgIcon from "../components/SvgIcon.vue";



const user = ref();
const router = useRouter();
const route = useRoute();
onMounted(async () => {
  const id = route.query.id;
  const res = await myAxios.get(`/user/${id}`);
  try{
    if(res.data){
      user.value=res.data as UserType;
    }
  }catch (e){
    console.error('获取用户数据时出错:', e);
  }

})

const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue,
    }
  })
}

</script>

<style scoped>

.left-icon{
  margin-top: 4px;
  margin-right: 4px;
}
.delete{
  background-color: #ee0a24;
  margin-left: 20px;
}
.message{
  background-color: #1296db;

}
.button{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.logout-cell {
  text-align: center;
  color: #d86262;
  height: 120px;
  margin-top: 9px;
}

.card{
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 10px !important;
  overflow: hidden;
  background: url("../assets/banner.webp");
  background-size: cover;
}

.card ::v-deep(.van-card__title) {
  color: black;
  font-family: "MV Boli",cursive;
  font-size: 20px;
}

.card ::v-deep(.van-card__desc) {
  margin-top: 8px;
  color: #ee0a24;
  font-size: 16px;
  font-family: "Arial",serif;
}
</style>
